<template>
  <div id="app">
    <ul id="views">
      <li>
        <router-link to="/home/zwx">home</router-link>
      </li>
      <li v-for="view in views" :key="view">
        <router-link :to="'/'+view">{{ view }}</router-link>
      </li>
      <li>
        <span @click="reload">reload</span>
      </li>
    </ul>
    <div id="container">
      <router-view id="view"></router-view>
    </div>
  </div>
</template>

<script>

export default {
  name: 'App',
  data() {
    return {
      views: [
        'list',
        'test'
      ]
    }
  }, created() {

  }, methods: {
    reload() {
      this.$axios.get('/reload')
    }
  }
}
</script>

<style>
html {
  background-color: #ccc;
}

* {
  margin: 0;
  padding: 0;
  cursor: default;
  font-weight: bold;
}

#app {
  font-family: "Courier New", 楷体;
  font-size: 1.5rem;
  line-height: 2rem;
  color: #000;
  background-color: #ccc;
}

pre {
  font-family: "Courier New", 楷体;
}

.el-input__inner, .el-textarea__inner, .el-button, .el-table__cell {
  font-family: "Courier New", 楷体 !important;
  font-size: 1.5rem !important;
  font-weight: bold !important;;
  color: #000 !important;
  border: none !important;
  background-color: #ccc !important;
}

.el-input__inner {
  border: 1px solid black !important;
}

.el-input__inner, .el-table__cell {
  font-size: 1.5em !important;
  line-height: 2em !important;
}

.katex-html{
  color: white!important;
}

#views {
  display: flex;
  justify-content: space-evenly;
  /*border-bottom: 1px solid white;*/
  height: 5vh;
}

#views li {
  display: inline-block;

  /*margin: 2em;*/
}

li {
  list-style: none;
}

a {
  text-decoration: none;
  color: #000;
}

#container {
  display: flex;
  align-content: center;
  justify-content: center;
  min-height: 95vh;
}

#view {
  width: 50vw;
  background-color: #ccc;
}

::-webkit-scrollbar {
  display: none;
}

.el-upload-dragger {
  background-color: transparent !important;
  width: 50vw !important;
  height: 70vh !important;
}
</style>
